<template>
	<view class="edit-profile-page">
		<view class="form-container">
			<u-form :model="formData" ref="formRef" label-width="150">
				<!-- 用户名称 -->
				<u-form-item label="用户名称" prop="nickName" required>
					<u-input v-model="formData.nickName" placeholder="请输入2-20个字符"
						:customStyle="inputStyle" />
				</u-form-item>
				<!-- 手机号 -->
				<u-form-item label="手机号码" prop="phonenumber" required>
					<u-input v-model="formData.phonenumber" placeholder="请输入11位手机号" type="number" maxlength="11"
						 :customStyle="inputStyle" />
				</u-form-item>
				<!-- 邮箱 -->
				<u-form-item label="电子邮箱" prop="email" required>
					<u-input v-model="formData.email" placeholder="请输入常用邮箱" 
						:customStyle="inputStyle" />
				</u-form-item>
				<!-- 性别 -->
				<u-form-item label="性别" prop="sex" required>
					<u-radio-group v-model="formData.sex" size="40" activeColor="#2979ff">
						<u-radio v-for="item in genderOptions" :key="item.value"
							:label="item.label" :name="item.value" labelSize="40">{{item.label}}</u-radio>
					</u-radio-group>
				</u-form-item>
			</u-form>
			<!-- 提交按钮 -->
			<u-button shape="circle" :loading="loading" @click="submitForm" :customStyle="buttonStyle">保存修改</u-button>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { onLoad ,onReady} from '@dcloudio/uni-app'
	import store from '@/store/index.js'
	import { editUserApi } from '@/apis/user.js'
	
	const formRef = ref()
	onReady(() => {
		formRef.value.setRules(rules)
	})
	
	// 表单数据
	const userInfo = computed(() => store.state.userinfo)
	const formData = ref({...userInfo.value})
	// 性别选项
	const genderOptions = ref([{
			label: '男',
			value: '0'
		},
		{
			label: '女',
			value: '1'
		}
	])

	// 输入框样式
	const inputStyle = computed(() => ({
		fontSize: '15px',
		height: '100rpx',
		paddingLeft: '20rpx'
	}))

	// 按钮样式
	const buttonStyle = computed(() => ({
		marginTop: '60rpx',
		height: '90rpx',
		fontSize: '32rpx',
		fontWeight: '500',
		background: 'linear-gradient(135deg, #6e8efb, #a777e3)',
		boxShadow: '0 10rpx 20rpx rgba(103, 136, 255, 0.3)',
		color:"#fff"
	}))

	// 表单验证规则
	const rules = {
		nickName: [{
				required: true,
				message: '请输入用户名称',
				trigger: ['blur', 'change']
			},
			{
				min: 2,
				max: 20,
				message: '长度在2到20个字符',
				trigger: ['blur', 'change']
			}
		],
		phonenumber: [{
				required: true,
				message: '请输入手机号码',
				trigger: ['blur', 'change']
			},
			{
				validator: (rule, value, callback) => {
					if (!/^1[3-9]\d{9}$/.test(value)) {
						callback(new Error('手机号格式不正确'))
					} else {
						callback()
					}
				},
				trigger: ['blur', 'change']
			}
		],
		email: [{
			validator: (rule, value, callback) => {
				if (value && !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {
					callback(new Error('请输入有效的邮箱地址'))
				} else {
					callback()
				}
			},
			trigger: ['blur', 'change']
		}]
	}

	const loading = ref(false)
	const submitForm = () => {
		formRef.value.validate(async valid => {
			if(!valid) return
			loading.value = true
			const {email,phonenumber,sex,nickName } = formData.value
			try {
				await editUserApi({email,phonenumber,sex,nickName})
				uni.$u.toast("修改成功")
				await store.dispatch('getUserInfo')
				setTimeout(() => {
					uni.navigateBack()
				},1000)
			} catch (error) {
				
			} finally {
				loading.value = false
			}
		})
	}

</script>

<style lang="scss">
	.edit-profile-page {
		min-height: 100vh;
		background-color: #f7f8fa;
		.form-container {
			background-color: #fff;
			margin: 20rpx 30rpx;
			border-radius: 24rpx;
			padding: 0 30rpx 40rpx;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
		}
	}
	::deep .u-input--border{
		border: none !important;
	}
</style>